<template>
  <div class="mbleague_substation">
    <div v-show="myCompetitionList.length" class="substation_title">
      我申办过的分站赛
    </div>
    <ul>
      <li v-for="(item, index) in myCompetitionList" :key="index" class="model_content">
        <div class="model_content_top gl_clear">
          <div class="model_content_topImg gl_fl">
            <img :src="getStaticFileUrl(item.logoImage || item.delegation.imagePath)" @error="errorPhoto">
          </div>
          <div class="model_content_topInfo">
            <div class="topInfo_name">{{ item.leagueName }}-{{ item.name }}</div>
            <div>
              <span
                class="topInfo_status"
                :class="{'status_ApproveSuccess': item.approveStatusCode === 'ApproveSuccess', 'status_Approved': item.approveStatusCode === 'NotApproved'}"
              >
                {{ item.approveStatus.name }}
              </span>
            </div>
          </div>
        </div>
        <div class="model_content_bottom">
          <van-button :icon="img_desc" color="#f3f3f3" block @click="jumpToDetails(item.id)">查看详情</van-button>
        </div>
      </li>

      <li v-show="!myCompetitionList.length">
        <div class="van-list__finished-text">暂无申办的分站赛，快去申办新的比赛吧。</div>
      </li>
    </ul>
    <div class="bottom_btn">
      <van-button class="bottom_btn_style" type="primary" color="#31456c" block @click="jumpToSubstationApply">申请新的分站赛</van-button>
    </div>
    <div v-if="pageLoading" class="page_loading fixed">
      <van-loading size="24px" vertical color="#fff">加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

import img_desc from '@/assets/images/league/mb_desc.png';
import defaultPhoto from '@/assets/images/face_default.png';

import {
  api_GET_EventsManagementCompetitionRequestMyCompetitionRequestLeagueCompetitionId // 分页查询我的分站赛申请列表（C端）
} from '@/extend/api/gameswaggerApi/app';

export default {
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      img_desc: img_desc,
      leagueRoute: '', // 联赛路由
      leagueId: '', // 联赛ID
      pageLoading: true, // 页面Loading
      myCompetitionList: [], // 我身办的分站赛列表
      defaultPhoto: defaultPhoto
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    'currentUserType': {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          if (val.delegationId && val.organizationUnitId) {
            // 新建的用户，如果没有完善信息，则没有delegationId
            this.reGetMyCompetitionRequest();
          } else {
            this.pageLoading = false;
          }
        }
      }
    },
    gameInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          this.reGetMyCompetitionRequest();
        }
      }
    }
  },
  created () {
    this.leagueRoute = this.$route.params.id;
    this.leagueId = this.$route.query.id;
  },
  methods: {
    reGetMyCompetitionRequest () {
      if (this.gameInfo.id && this.currentUserType && this.currentUserType.delegationId) {
        this.apiMyCompetitionRequest(this.gameInfo.id, {
          DelegationId: this.currentUserType.delegationId,
          OrganizationId: this.currentUserType.organizationUnitId,
          IncludeCertificationLevel: true, // 后端要求传true
          IncludeDelegation: true, // 后端要求传true
          IncludeLeagueCompetition: true // 后端要求传true
        });
      }
    },
    // 分页查询我的分站赛申请列表（C端）
    apiMyCompetitionRequest (id, vo) {
      this.pageLoading = true;
      api_GET_EventsManagementCompetitionRequestMyCompetitionRequestLeagueCompetitionId(id, vo)
        .then(
          res => {
            this.myCompetitionList = res.items;
            this.pageLoading = false;
          }
        )
        .catch(
          error => {
            this.pageLoading = false;
            this.$toast.fail(`获取分站赛列表失败 ${error.error.message}`);
          }
        );
    },
    jumpToDetails (id) {
      this.$router.push({
        name: 'SubstationDetails',
        params: {
          substationId: id
        }
      });
    },
    jumpToSubstationApply () {
      this.$router.push({
        name: 'Process'
      });
    },
    // 错误图片处理
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
      img.onerror = null;
    },
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style>
  .model_content_bottom .van-button__text {
    font-size: 13px;
    font-weight: 400;
    color: #333333;
    line-height: 19px;
    margin-left: 8px;
  }
</style>

<style lang="scss" scoped>
  .mbleague_substation {
    position: relative;
    overflow-y: scroll;
    height: calc(100% - 80px);
  }
  .bottom_btn {
    position: fixed;
    height: 80px;
    padding: 20px;
    width: 100%;
    left: 0;
    bottom: 0;
  }
  .bottom_btn_style {
    height: 40px;
    border-radius: 4px;
  }
  .substation_title {
    height: 45px;
    padding: 0 10px;
    line-height: 45px;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }
  .model_content {
    box-sizing: border-box;
    width: calc(100% - 20px);
    margin: 0 auto 5px;
    padding: 10px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
  }
  .model_content_top {
    padding-bottom: 10px;
    border-bottom: 1px dashed #979797;
  }
  .model_content_topImg {
    padding-top: 10px;

    img {
      width: 50px;
      height: 50px;
      border-radius: 4px;
    }
  }
  .model_content_topInfo {
    margin-left: 80px;
  }
  .topInfo_name {
    padding-right: 40px;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
  }
  .topInfo_status {
    display: inline-block;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 400;
    color: #ffffff;
    line-height: 18px;
    border-radius: 12px;
    background-color: #c6c6c6;
  }
  .status_Approved {
    background-color: #f79600;
  }
  .status_ApproveSuccess {
    background-color: #6dd400;
  }
  .model_content_bottom {
    padding-top: 10px;

  }
</style>
